<template>
	<view class="password-box">
		<view class="password-top-box">
			<view class="password-top">
				<image class="password-close" @click="cancelPay" src="/static/images/pass_cha.png" />
				<view class="password-top-title">请输入会员支付密码</view>
				<template v-if="pay">
					<view class="password-top-tag">即将支付</view>
					<view class="password-top-price">
						<text class="password-top-price-left">¥</text>
						<text class="password-top-price-right" v-text="price"></text>
					</view>
					<navigator url="/pages/order/vipPassword/vipPassword" class="password-forget-btn-box" hover-class="password-forget-btn-hover">
						<text class="password-forget-btn">忘记密码</text>
					</navigator>
				</template>
				<view class="password-show">
					<view class="password-list" v-for="(item, index) in passwordList" :key="index">
						<view :class="{'password-md': item}"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="password-bottom" :style="bottomStyle">
			<view class="password-btn" v-for="(item, index) in btnList" v-text="item" :key="index" @tap="inputPassword(item)"></view>
			<view class="password-btn password-disabled"></view>
			<view class="password-btn" @tap="inputPassword(0)">0</view>
			<view class="password-btn password-del" :class="password ? '' : 'password-disabled'" @tap="delPassword"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'template-password',
		props: {
			pay: {
				type: Boolean,
				default: false,
			},
			price: {
				type: [String, Number],
				default: '',
			},
			value: {
				type: [String, Number],
				default: '',
			}
		},
		emits: ['update:value', 'input', 'success'],
		data() {
			return {
				password: '',
				passwordList: [false, false, false, false, false, false],
				btnList: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
			}
		},
		computed: {
			bottomStyle() {
				return `padding-bottom:${this.$store.bottomHeight}rpx`;
			}
		},
		methods: {
			//输入支付密码
			inputPassword(num) {
				let len = String(this.password).length;
				if (len < 5) {
					this.password += num;
					this.passwordList[len] = true;
				} else if (String(this.password).length == 5) {
					this.password += num;
					this.passwordList[len] = true;

					this.$nextTick(() => {
						this.$emit('update:value', this.password);
						this.$emit('input', this.password);
						setTimeout(() => {
							this.$emit('success', this.password);
						}, 300)
					})
				}
			},
			//取消会员支付
			cancelPay() {
				this.$nextTick(() => {
					this.$emit('cancel');
				})
			},
			//删除支付密码
			delPassword() {
				let index = String(this.password).length - 1;
				if (index >= 0) {
					this.password = String(this.password).slice(0, index);
					this.passwordList[index] = false;
				}
			},
		},
		watch: {
			value(n, o) {
				if (n != o) {
					this.password = n;
					let len = String(n).length;
					this.passwordList = [false, false, false, false, false, false];
					for (let i = 0; i < len; i++) {
						this.passwordList[i] = true;
					}
				}
			}
		},
	}
</script>

<style lang="less">
	.password-box {
		box-sizing: content-box;
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.53);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;

		.password-top-box {
			width: 100%;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.password-top {
				width: 86vw;
				background-color: white;
				border-radius: 2vw;
				position: relative;
				padding: 6vw 5.5vw 8vw;
				box-sizing: border-box;

				.password-close {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					top: 5vw;
					right: 5vw;
				}

				.password-top-title,
				.password-top-tag {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 4vw;
					color: #1a1a1a;
					line-height: 4vw;
				}

				.password-top-title {
					height: 6vw;
				}

				.password-top-tag {
					height: 4vw;
					color: #000;
					margin: 8vw 0 3vw;
				}

				.password-top-price {
					width: 100%;
					height: 10vw;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					color: #000;

					.password-top-price-left {
						font-size: 4.5vw;
					}

					.password-top-price-right {
						margin-left: 0.1vw;
						font-size: 8vw;
					}
				}

				.password-forget-btn-hover {
					background-color: transparent;
				}

				.password-forget-btn-box {
					display: flex;
					justify-content: flex-end;

					.password-forget-btn {
						color: #409eff;
						font-size: 24rpx;
					}
				}

				.password-show {
					width: 100%;
					height: 11.5vw;
					box-sizing: border-box;
					border: 1px solid #d1d1d1;
					display: flex;
					align-items: center;
					margin-top: 6vw;

					.password-list {
						border-left: 1px solid #eeeeee;
						width: 16.666%;
						height: 100%;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;

						.password-md {
							width: 28rpx;
							height: 28rpx;
							border-radius: 50%;
							background-color: #333333;
						}
					}

					.password-list:nth-child(1) {
						border-left: 0;
					}
				}
			}
		}

		.password-bottom {
			width: 100%;
			height: 59vw;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			background: #f5f5f5;

			.password-btn {
				width: 33.33%;
				height: 25%;
				font-size: 7vw;
				color: #333;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 1px solid #e2e2e2;
			}

			.password-btn:active {
				background-color: #eaeaea;
			}

			.password-btn:nth-child(3n-1) {
				border-left: 1px solid #e2e2e2;
				border-right: 1px solid #e2e2e2;
			}

			.password-btn:nth-child(3n-2) {
				border-left: 1px solid #e2e2e2;
			}

			.password-btn:nth-child(3n) {
				border-right: 1px solid #e2e2e2;
			}

			.password-disabled {
				background-color: #e0e0e0;
			}

			.password-del {
				background-image: url("/static/images/del-password.png");
				background-size: 100% 100%;
				background-repeat: repeat;
			}
		}
	}
</style>
